<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>{{ block "title" . }}{{ .Site.Title }}{{ end }}</title>
    <style>
        /* 定义自定义字体 */
        @font-face {
            font-family: 'PragmataPro';
            src: url({{"fonts/PragmataPro.woff2" | relURL }}) format('woff2');
            font-weight: normal;
            font-style: normal;
        }

        /* 应用自定义字体 */
        body {
            font-family: 'PragmataPro', 'Microsoft YaHei', sans-serif; /* 自定义字体，后备字体为 sans-serif */
        }
    </style>
    <link rel="icon" href="{{"favicon.ico" | relURL }}">
    <link rel="stylesheet" href="{{"pure-min.css" | relURL }}" integrity="sha384-X38yfunGUhNzHpBaEBsWLO+A0HDYOQi8ufWDkZ0k9e0eXz/tH3II7uKZ9msv++Ls" crossorigin="anonymous">
    <link rel="stylesheet" href="{{"custom.css" | relURL }}">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="{{"cash.min.js" | relURL }}"></script>
  </head>
  <body>
    {{ block "main" . }}
    {{ end }}
    {{ block "footer" . }}
    <!-- More shared code, perhaps a footer but that can be overridden if need be in  -->
    {{ end }}
    <script>
      $(document).ready(function () {
        $('code.language-csv').each(function () {
          const csvText = $(this).text().trim();
          const lines = csvText.split('\n');
          const table = $('<table class="pure-table pure-table-bordered"></table>');
          const thead = $('<thead></thead>');
          const tbody = $('<tbody></tbody>');

          // Create header row
          const header = lines[0].split(',');
          const headerRow = $('<tr></tr>');
          header.forEach(cellText => {
            const cell = $('<th></th>').text(cellText);
            headerRow.append(cell);
          });
          thead.append(headerRow);

          // Create data rows
          for (let i = 1; i < lines.length; i++) {
            const row = lines[i].split(',');
            const tableRow = $('<tr></tr>');
            row.forEach(cellText => {
              const cell = $('<td></td>').text(cellText);
              tableRow.append(cell);
            });
            tbody.append(tableRow);
          }

          table.append(thead);
          table.append(tbody);

          // Replace the pre element with the table
          $(this).closest('pre').replaceWith(table);
        });
      });
    </script>

  </body>
</html>
